<!DOCTYPE html>
<html>
	<head>
		<style>
			.toolbar {
				border: 1px solid #ccc;
				width: 100%;
				float: left;
			}

			.text {
				border: 1px solid #ccc;
				height: 100%;
			}

			.toolbar-parent {
				position: absolute;
				top: 5px;
				left: 5px;
				right: 5px;
				height: 45px;
			}

			.text-parent {
				position: absolute;
				top: 50px;
				bottom: 10px;
				left: 5px;
				right: 5px;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="toolbar-parent">
				<div id="toolbar-container" class="toolbar"></div>
			</div>

			<div class="text-parent">
				<div id="text-container" class="text"></div>
			</div>
		</div>

		<link href="./highlight.min.css" rel="stylesheet">
		<script src="./wangEditor.min.js"></script>
		<script src="./highlight.min.js"></script>
		<script>
			const demo='<h1>xxx函数使用说明</h1><p>内容描述，简介......</p><h2>参数说明</h2><p>简单描述下......</p><table border="0" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><th>参数名</th><th>参数类型</th><th>参数描述&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</th></tr><tr><td>param1</td><td>int</td><td>参数1</td></tr><tr><td>param2</td><td>double</td><td>参数2</td></tr></tbody></table><h2>返回值说明</h2><p>这里简单说明下呗......</p><table border="0" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><th>return</th><th>Type</th><th>Describe</th></tr><tr><td>frequency</td><td>double</td><td>base frequency of wave</td></tr></tbody></table><h2>Talk is cheap,Show me the code</h2><p>demo......</p><pre type="C#"><code><span class="hljs-selector-tag">int</span> <span class="hljs-selector-tag">main</span>()<br>{<br>	<span class="hljs-selector-tag">Verify_DAQ_HW_Ready</span>();<br>	<span class="hljs-selector-tag">Test_DIO</span>();<br>	<span class="hljs-selector-tag">Test_AO_AI</span>();<br>	<span class="hljs-selector-tag">SetProgressValue</span>(<span class="hljs-number">100</span>);<br>	<span class="hljs-selector-tag">return</span> <span class="hljs-selector-tag">0</span>;<br>}</code></pre>';
			const E = window.wangEditor;
			const editor = new E('#toolbar-container', '#text-container'); // 传入两个元素
			editor.config.zIndex=1;
			// 挂载highlight插件
			editor.highlight = hljs
			editor.create();
			editor.txt.html(demo);
			
			function getHtml() {
                let html = editor.txt.html();
				return html;
			}
			
		</script>
	</body>
</html>
